<template>
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never">
      <el-page-header
        :content="rank_id ? t('updateRanking') : t('addRanking')"
        :icon="ArrowLeft"
        @back="back()"
      />
    </el-card>

    <el-card class="box-card mt-[15px] !border-none" shadow="never" v-loading="loading">
      <el-form
        :model="formData"
        label-width="120px"
        ref="formRef"
        :rules="formRules"
        class="page-form"
      >
        <el-form-item :label="t('rankName')" prop="name">
          <el-input
            v-model.trim="formData.name"
            clearable
            :placeholder="t('rankNamePlaceholder')"
            class="input-width"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>

        <el-form-item :label="t('rankType')" prop="rank_type">
          <el-select v-model="formData.rank_type" :placeholder="t('rankTypePlaceholder')" clearable>
            <el-option
              v-for="(value, key) in formList.rankTypeList"
              :key="key"
              :label="value"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <div class="ml-[120px] mb-[10px] text-[12px] text-[#999] leading-[20px]">{{
          t('rankTypeTips')
        }}</div>
        <el-form-item :label="t('ruleType')" prop="rule_type">
          <el-radio-group v-model="formData.rule_type">
            <el-radio v-for="(value, key) in formList.ruleTypeList" :key="key" :label="key">{{
              value
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="t('goodsSource')" prop="goods_source">
          <el-radio-group v-model="formData.goods_source">
            <el-radio v-for="(value, key) in formList.goodsSourceList" :key="key" :label="key">{{
              value
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          :label="t('selectGoods')"
          prop="goods_json"
          v-if="formData.goods_source == 'goods'"
        >
          <goods-select-popup
            ref="goodsSelectPopupRef"
            v-model="formData.goods_ids"
            @goods-select="goodsSelect"
            :min="1"
            :max="99"
          />
        </el-form-item>

        <el-form-item v-if="goods_json && goods_json.length && formData.goods_source == 'goods'">
          <el-table :data="goods_json" size="large" max-height="400">
            <el-table-column
              prop="goods_id"
              :label="t('goodsSelectPopupGoodsInfo')"
              min-width="300"
            >
              <template #default="{ row }">
                <div class="flex items-center cursor-pointer">
                  <div class="min-w-[60px] h-[60px] flex items-center justify-center">
                    <el-image
                      v-if="row.goods_image"
                      class="w-[60px] h-[60px]"
                      :src="img(row.goods_image)"
                      fit="contain"
                    >
                      <template #error>
                        <div class="image-slot">
                          <img
                            class="w-[60px] h-[60px]"
                            src="@/views/addon/shop/assets/goods_default.png"
                          />
                        </div>
                      </template>
                    </el-image>
                    <img
                      v-else
                      class="w-[70px] h-[60px]"
                      src="@/views/addon/shop/assets/goods_default.png"
                      fit="contain"
                    />
                  </div>
                  <div class="ml-2">
                    <span :title="row.sku_name" class="multi-hidden">{{
                      row.sku_name ? row.goods_name + ' ' + row.sku_name : row.goods_name
                    }}</span>
                    <span class="text-primary text-[12px]">{{ row.goods_type_name }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="price" :label="t('goodsSelectPopupPrice')" min-width="120">
              <template #default="{ row }">
                <div>￥{{ row.price }}</div>
              </template>
            </el-table-column>

            <el-table-column prop="sort" :label="t('sort')" min-width="120">
              <template #header>
                <div style="display: inline-flex; align-items: center">
                  <span class="mr-[5px]">{{ t('sort') }}</span>
                  <el-tooltip
                    class="box-item"
                    effect="light"
                    :content="t('sortRules')"
                    placement="top"
                  >
                    <el-icon color="#666">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
              <template #default="{ row }">
                <el-input
                  @keyup="filterNumber($event)"
                  v-model.number="row.sort"
                  class="w-[70px]"
                  maxlength="8"
                />
              </template>
            </el-table-column>

            <el-table-column :label="t('operation')" align="right" min-width="160">
              <template #default="{ row, $index }">
                <el-button type="primary" link @click="deleteGoodsEvent(row, $index)">{{
                  t('delete')
                }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item
          :label="t('goodsSelectPopupGoodsCategory')"
          prop="category_ids"
          v-if="formData.goods_source == 'category'"
        >
          <el-cascader
            v-model="formData.category_ids"
            :options="goodsCategoryOptions"
            :props="goodsCategoryProps"
            clearable
            filterable
            @change="categoryHandleChange"
            popper-class="choice"
          />
          <div class="ml-[10px]">
            <span
              class="cursor-pointer text-primary mr-[10px]"
              @click="refreshGoodsCategory(true)"
              >{{ t('refresh') }}</span
            >
            <span class="cursor-pointer text-primary" @click="toGoodsCategoryEvent">{{
              t('addCategory')
            }}</span>
          </div>
        </el-form-item>

        <el-form-item :label="t('brand')" prop="brand_ids" v-if="formData.goods_source == 'brand'">
          <el-select
            v-model="formData.brand_ids"
            :placeholder="t('brandPlaceholder')"
            clearable
            multiple
          >
            <el-option
              v-for="item in brandOptions"
              :key="item.brand_id"
              :label="item.brand_name"
              :value="item.brand_id"
            />
          </el-select>
          <div class="ml-[10px]">
            <span class="cursor-pointer text-primary mr-[10px]" @click="refreshGoodsBrand(true)">{{
              t('refresh')
            }}</span>
            <span class="cursor-pointer text-primary" @click="toGoodsBrandEvent">{{
              t('addBrand')
            }}</span>
          </div>
        </el-form-item>

        <el-form-item :label="t('label')" prop="label_ids" v-if="formData.goods_source == 'label'">
          <el-checkbox-group v-model="formData.label_ids">
            <el-checkbox
              :label="item.label_id"
              v-for="(item, index) in labelOptions"
              :key="index"
              >{{ item.label_name }}</el-checkbox
            >
          </el-checkbox-group>
          <div class="ml-[10px]">
            <span class="cursor-pointer text-primary mr-[10px]" @click="refreshGoodsLabel">{{
              t('refresh')
            }}</span>
            <span class="cursor-pointer text-primary" @click="toGoodsLabelEvent">{{
              t('addLabel')
            }}</span>
          </div>
        </el-form-item>

        <el-form-item :label="t('sort')" prop="sort">
          <el-input
            v-model.number="formData.sort"
            clearable
            :placeholder="t('sortPlaceholder')"
            class="input-width"
            maxlength="8"
            show-word-limit
            @keyup="filterNumber($event)"
            @blur="formData.sort = $event.target.value"
          />
        </el-form-item>
        <el-form-item :label="t('isShow')" prop="status">
          <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
    </el-card>

    <div class="fixed-footer-wrap">
      <div class="fixed-footer">
        <el-button type="primary" @click="save()">{{ t('save') }}</el-button>
        <el-button @click="back()">{{ t('cancel') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { t } from '@/lang'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage, FormInstance } from 'element-plus'
import {
  addGoodRank,
  editGoodRank,
  getRankInfo,
  optionData
} from '@/views/addon/shop/api/marketing'
import goodsSelectPopup from '@/views/addon/shop/views/goods/components/goods-select-popup.vue'
import { getBrandList, getCategoryTree, getLabelList } from '@/views/addon/shop/api/goods'
import { deepClone, filterNumber, img } from '@/utils/common'

const router = useRouter()
const route = useRoute()
const loading = ref(true)
const rank_id = route.query.rank_id
const goods_json = ref([])
const formData = reactive({
  name: '',
  goods_source: 'all',
  rank_type: '',
  sort: '',
  rule_type: 'sale',
  category_ids: [],
  status: 1,
  brand_ids: [],
  label_ids: [],
  goods_json: [] as any,
  goods_ids: []
})

const formList = reactive({
  rankTypeList: [],
  goodsSourceList: [],
  ruleTypeList: []
})
const formRef = ref<FormInstance>()
const formRules = computed(() => {
  return {
    name: [{ required: true, message: t('rankNamePlaceholder'), trigger: 'blur' }],
    rule_type: [
      {
        required: true,
        message: t('ruleTypePlaceholder'),
        trigger: 'change'
      }
    ],
    rank_type: [
      {
        required: true,
        message: t('rankTypePlaceholder'),
        trigger: 'change'
      }
    ],
    goods_source: [
      {
        required: true,
        message: t('goodsSourcePlaceholder'),
        trigger: 'change'
      }
    ],
    label_ids: [
      {
        validator: (rule: any, value: any, callback: any) => {
          if (formData.goods_source === 'label') {
            if (!value || value.length === 0) {
              callback(t('labelTips')) // 提示错误信息
            } else {
              callback() // 校验通过
            }
          } else {
            callback()
          }
        },
        trigger: 'change'
      }
    ],
    brand_ids: [
      {
        required: true,
        validator: (rule: any, value: any, callback: any) => {
          if (formData.goods_source === 'brand') {
            if (!value || value.length === 0) {
              callback(t('brandTips')) // 提示错误信息
            } else {
              callback() // 校验通过
            }
          } else {
            callback()
          }
        },
        trigger: 'change'
      }
    ],
    category_ids: [
      {
        required: true,
        validator: (rule: any, value: any, callback: any) => {
          if (formData.goods_source === 'category') {
            if (!value || value.length === 0) {
              callback(t('categoryTips')) // 提示错误信息
            } else {
              callback() // 校验通过
            }
          } else {
            callback()
          }
        },
        trigger: 'change'
      }
    ],
    goods_json: [
      {
        required: true,
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          if (formData.goods_source == 'goods') {
            if (goods_json.value.length == 0) {
              callback(new Error(t('goodsJsonEmpty')))
            } else {
              callback()
            }
          }
        }
      }
    ]
  }
})

const getRankDetails = () => {
  optionData().then((res) => {
    loading.value = false
    formList.rankTypeList = res.data.rank_type
    formList.goodsSourceList = res.data.goods_source
    formList.ruleTypeList = res.data.rule_type
  })
  if (rank_id) {
    // 获取详情
    loading.value = true
    const id = Number(rank_id)
    getRankInfo(id).then((res) => {
      const data = res.data
      if (data) {
        Object.assign(formData, data)
        if (formData.goods_source == 'goods') {
          formData.goods_ids.splice(0, formData.goods_ids.length)
          formData.goods_json.forEach((item: any) => {
            formData.goods_ids.push(item.goods_id)
          })
        }
        goods_json.value = data.goods_list.map((item: any) => {
          return {
            goods_id: item.goods_id,
            sort: item.sort,
            price: item.goodsSku.price,
            goods_type_name: item.goods_type_name,
            goods_name: item.goods_name,
            goods_image: item.goodsSku.sku_image
          }
        })
        loading.value = false
      }
    })
  }
}
getRankDetails()

// 商品分类
const goodsCategoryOptions = reactive([])
const goodsCategoryProps = {
  multiple: true
}

const categoryHandleChange = (value: any) => {
  console.log(value, formData.category_ids, formData.category_ids.toString())
}

// 跳转到商品分类，添加分类
const toGoodsCategoryEvent = () => {
  const url = router.resolve({
    path: '/shop/goods/category'
  })
  window.open(url.href)
}

// 刷新商品分类
const refreshGoodsCategory = (bool = false) => {
  getCategoryTree().then((res) => {
    const data = res.data
    if (data) {
      const goodsCategoryTree: any = []
      data.forEach((item: any) => {
        const children: any = []
        if (item.child_list) {
          item.child_list.forEach((childItem: any) => {
            children.push({
              value: childItem.category_id,
              label: childItem.category_name
            })
          })
        }
        goodsCategoryTree.push({
          value: item.category_id,
          label: item.category_name,
          children
        })
      })
      goodsCategoryOptions.splice(0, goodsCategoryOptions.length, ...goodsCategoryTree)
      if (bool) {
        ElMessage({
          message: t('refreshSuccess'),
          type: 'success'
        })
      }
    }
  })
}

refreshGoodsCategory()

// 品牌列表下拉框
const brandOptions = reactive([])

// 跳转到商品品牌，添加品牌
const toGoodsBrandEvent = () => {
  const url = router.resolve({
    path: '/shop/goods/brand'
  })
  window.open(url.href)
}

// 商品品牌
const refreshGoodsBrand = (bool = false) => {
  getBrandList({}).then((res) => {
    const data = res.data
    if (data) {
      brandOptions.splice(0, brandOptions.length, ...data)
      if (bool) {
        ElMessage({
          message: t('refreshSuccess'),
          type: 'success'
        })
      }
    }
  })
}

refreshGoodsBrand()

// 标签组列表复选框
const labelOptions = reactive([])

// 跳转到商品标签，添加标签
const toGoodsLabelEvent = () => {
  const url = router.resolve({
    path: '/shop/goods/label'
  })
  window.open(url.href)
}

// 商品标签
const refreshGoodsLabel = (bool = false) => {
  getLabelList({}).then((res) => {
    const data = res.data
    if (data) {
      labelOptions.splice(0, labelOptions.length, ...data)
      if (bool) {
        ElMessage({
          message: t('refreshSuccess'),
          type: 'success'
        })
      }
    }
  })
}

refreshGoodsLabel()

//选择商品
const goodsSelect = (value: any) => {
  let arr = []
  for (let key in value) {
    let goods_sku: any = value[key]
    let sku: any = {
      goods_id: goods_sku.goods_id,
      price: goods_sku.goodsSku.price,
      goods_type_name: goods_sku.goods_type_name,
      goods_image: goods_sku.goods_cover,
      goods_name: goods_sku.goods_name
    }
    if (goods_json.value.length) {
      goods_json.value.forEach((el: any) => {
        if (el.goods_id == sku.goods_id) {
          sku = Object.assign(sku, el)
        }
      })
    }
    arr.push(deepClone(sku))
  }
  goods_json.value = arr
}

// 删除商品
const deleteGoodsEvent = (row: any, index: any) => {
  goods_json.value.splice(index, 1)
  formData.goods_ids.splice(formData.goods_ids.indexOf(row.goods_id), 1)
}

const preventDuplication = ref(false)
const save = async () => {
  // 触发表单校验
  if (preventDuplication.value) return

  await formRef.value?.validate(async (valid) => {
    if (valid) {
      loading.value = true
      formData.goods_json = goods_json.value.map((item: any) => {
        return {
          goods_id: item.goods_id, // 保留 goods_id
          sort: item.sort // 保留 sort 排序号
        }
      })

      const goodsCategory: any = []
      formData.category_ids.forEach((item: any) => {
        if (Array.isArray(item) && item.length === 2) {
          goodsCategory.push(item[1])
        } else if (Array.isArray(item) && item.length === 1) {
          goodsCategory.push(item[0])
        } else {
          goodsCategory.push(item)
        }
      })
      formData.category_ids = goodsCategory
      if (rank_id) {
        formData.id = rank_id // 将 rank_id 拼接到 dataToSubmit 中
        editGoodRank(formData)
          .then((res) => {
            loading.value = false
            preventDuplication.value = false
            if (res.data) {
              router.push('/shop/marketing/goods_rank/list')
            }
          })
          .catch(() => {
            loading.value = false
            preventDuplication.value = false
          })
      } else {
        addGoodRank(formData)
          .then((res) => {
            loading.value = false
            preventDuplication.value = false
            if (res.data) {
              router.push('/shop/marketing/goods_rank/list')
            }
          })
          .catch(() => {
            loading.value = false
            preventDuplication.value = false
          })
      }
    } else {
      preventDuplication.value = false
    }
  })
}

const back = () => {
  router.push('/shop/marketing/goods_rank/list')
}
</script>

<style lang="scss" scoped></style>
